<template>
    <div class="echart" id="Last7MaxTopicAnalyseEchart" :style="{ float: 'left', width: '100%', height: '700px' }">
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from "echarts";

export default {
    name: 'Last7MaxTopicAnalyseEchart',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user", 'userId'
        ])
    },
    Last7MaxTopicAnalyseEchart: null,

    data() {
        return {
        };
    },
    mounted() {
        this.GetEchartApi();
    },
    methods: {

        async GetEchartApi() {
            let { Data: { datas } } = await this.$Post("/Topic/Last7MaxTopicAnalyse", {});
            const option = {
                title: {
                    text: '话题热点'
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    data: datas.map(x => x.name)
                },
                grid: {
                    left: '10%',
                    bottom: '35%',
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        rotate: 40, // 设置文字方向为向下排列
                        interval: 0, // 设置文字与轴线的距离
                    },
                    data: datas.map(x => x.name)
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: datas.map(x => x.values),
                        type: 'line',
                        itemStyle: {
                            color: 'pink' // 将线条颜色设置为粉色
                        }
                    }
                ]
            };
            this.myChart = echarts.init(document.getElementById("Last7MaxTopicAnalyseEchart"));// 图标初始化
            this.myChart.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },

    }


}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
